<template>
  <!-- 弹窗图片 -->
  <!-- 添加的图片 -->
  <div v-if="visible">
    <div class="dialog-title-yy-information">
      <img src="@/assets/img/module2/content.png" alt="弹窗图片" />
      <img
        src="@/assets/img/module2/snailtitleicon.png"
        style="position: absolute; top: -10%; left: 5%"
      />
      <span class="dialog-title-text-yy-information">批复文件</span>
    </div>

    <div
      class="dialog-container-ok-information"
      style="overflow: auto; max-height: 2000px"
    >
      <div class="bottom-section-yy-information">
        <!-- 方案名称 -->
        <div
          style="
            margin-bottom: 3px;
            display: flex;
            align-items: center;
            top: -7vh;
            position: relative;
          "
        >
          <p
            class="up-content-text-yy-information"
            style="color: rgba(135, 183, 218, 1)"
          >
            文件名称
          </p>
          <div class="info-box-yy-information">
            <span class="info-box-text-yy-information">{{
              selectedDetails.approvalFileName
            }}</span>
          </div>
        </div>
        <!-- 创建时间 -->
        <div
          style="
            margin-bottom: 3px;
            display: flex;
            align-items: center;
            top: -7vh;
            position: relative;
          "
        >
          <p
            class="up-content-text-yy-information"
            style="color: rgba(135, 183, 218, 1)"
          >
            接收时间
          </p>
          <div class="info-box-yy-information">
            <span class="info-box-text-yy-information">{{
              selectedDetails.applicationAcceptanceTime
            }}</span>
          </div>
        </div>

        <!-- 标题内容 -->
        <div class="select-section-title-ok-information">
          <div class="select-section-titleimg-yy-information"></div>
          <span class="select-section-titletext-yy-information"
            >空域使用需求信息</span
          >
        </div>

        <!-- 下拉框 -->
        <div
          class="select-section-yy-pr-information"
          style="margin-top: -120px"
        >
          <div
            class="select-section-content-yy-pr-information"
            ref="scrollContainer"
          >
            <el-collapse
              v-model="activeNames"
              class="collapse-yy-pr-information"
              accordion
              @change="handleChange"
            >
              <el-collapse-item title="起降场信息" name="main1">
                <div class="collapse-content-main1-yy-pr-information">
                  <!-- 内部起降场信息 -->
                  <el-collapse
                    v-model="activeNamesDetail"
                    class="collapse-yy-inner-pr-information"
                    accordion
                    @change="handleChangeDetail"
                  >
                    <el-collapse-item
                      v-for="(row, index) in selectedDetails.takeoffLandInfo"
                      :key="index"
                      :title="row.airportName"
                      :name="index"
                    >
                      <div class="collapse-content-yy-pr-information">
                        机场类型：{{ row.airportType }}，降落区类型：{{
                          row.landingZoneType
                        }}，纬度信息：{{ formatCoordinate(row.longitude) }}，经度信息：{{
                          formatCoordinate(row.latitude) }}
                        <p v-if="row.pointInfo && row.pointInfo.length > 0">
                          Point Info:
                        </p>
                        <ul v-if="row.pointInfo && row.pointInfo.length > 0">
                          <li v-for="row in row.pointInfo" :key="row.pointId">
                            Point ID: {{ row.pointId }}, Latitude:
                            {{ row.latitude }}, Longitude: {{ row.longitude }},
                            Min Altitude: {{ row.minAltitude }}, Max Altitude:
                            {{ row.maxAltitude }}, Radius: {{ row.radius }}
                          </li>
                        </ul>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </el-collapse-item>

              <el-collapse-item title="航路信息" name="main2">
                <div class="collapse-content-main2-yy-pr-information">
                  <el-collapse
                    v-model="activeNamesDetail"
                    class="collapse-yy-inner-pr-information"
                    accordion
                    @change="handleChangeDetail"
                  >
                    <el-collapse-item
                      v-for="(row, index) in selectedDetails.airLaneInfo"
                      :key="index"
                      :title="row.routeName"
                      :name="index"
                    >
                      <div class="collapse-content-yy-pr-information">
                        航路类型：{{ row.routeType }}，坐标信息点：{{
                          row.coordinateInformationPoints
                        }}，高度区间：{{ row.heightIntervalTest }}
                        <p v-if="row.pointInfo && row.pointInfo.length > 0">
                          Point Info:
                        </p>
                        <ul v-if="row.pointInfo && row.pointInfo.length > 0">
                          <li v-for="row in row.pointInfo" :key="row.pointId">
                            Point ID: {{ row.pointId }}, Latitude:
                            {{ row.latitude }}, Longitude: {{ row.longitude }},
                            Min Altitude: {{ row.minAltitude }}, Max Altitude:
                            {{ row.maxAltitude }}, Radius: {{ row.radius }}
                          </li>
                        </ul>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </el-collapse-item>

              <el-collapse-item title="作业区域信息" name="main3">
                <div class="collapse-content-main3-yy-pr-information">
                  <el-collapse
                    v-model="activeNamesDetail"
                    class="collapse-yy-inner-pr-information"
                    accordion
                    @change="handleChangeDetail"
                  >
                    <el-collapse-item
                      v-for="(row, index) in selectedDetails.workInfo"
                      :key="index"
                      :title="row.operationAreaName"
                      :name="index"
                    >
                      <div class="collapse-content-yy-pr-information">
                        作业区域类型：{{ row.operationAreaType }}，作业类型：{{
                          row.operationType
                        }}，坐标信息点：{{
                          row.coordinateInformationPoints
                        }}，高度区间：{{ row.heightIntervalTest }}
                        <p v-if="row.pointInfo && row.pointInfo.length > 0">
                          Point Info:
                        </p>
                        <ul v-if="row.pointInfo && row.pointInfo.length > 0">
                          <li v-for="row in row.pointInfo" :key="row.pointId">
                            Point ID: {{ row.pointId }}, Latitude:
                            {{ row.latitude }}, Longitude: {{ row.longitude }},
                            Min Altitude: {{ row.minAltitude }}, Max Altitude:
                            {{ row.maxAltitude }}, Radius: {{ row.radius }}
                          </li>
                        </ul>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </el-collapse-item>

              <el-collapse-item title="特殊空域信息" name="main4">
                <div class="collapse-content-main4-yy-pr-information">
                  <el-collapse
                    v-model="activeNamesDetail"
                    class="collapse-yy-inner-pr-information"
                    accordion
                    @change="handleChangeDetail"
                  >
                    <el-collapse-item
                      v-for="(row, index) in selectedDetails.specialInfo"
                      :key="index"
                      :title="row.specialAirspaceName"
                      :name="index"
                    >
                      <div class="collapse-content-yy-pr-information">
                        特殊空域类型：{{
                          row.specialAirspaceType
                        }}，坐标信息点：{{
                          row.coordinateInformationPoints
                        }}，高度区间：{{ row.heightIntervalTest }}
                        <p v-if="row.pointInfo && row.pointInfo.length > 0">
                          Point Info:
                        </p>
                        <ul v-if="row.pointInfo && row.pointInfo.length > 0">
                          <li v-for="row in row.pointInfo" :key="row.pointId">
                            Point ID: {{ row.pointId }}, Latitude:
                            {{ row.latitude }}, Longitude: {{ row.longitude }},
                            Min Altitude: {{ row.minAltitude }}, Max Altitude:
                            {{ row.maxAltitude }}, Radius: {{ row.radius }}
                          </li>
                        </ul>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </el-collapse-item>
            </el-collapse>

            <div class="tianchong-yy-pr-information"></div>
          </div>
        </div>
        <img
          :src="selectedDetails.documentsPreview"
          alt="图片"
          style="
            width: 90%;
            position: relative;
            top: 33vh;
            margin-left: 20px;
            height: 350px;
            margin-bottom: 10px;
          "
        />
        <div>
          <button
            @click="downloadAttachment"
            type="primary"
            icon="el-icon-search"
            class="el-query-button"
          >
            查看附件
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
  
  
  <script>
export default {
  name: "GoodDialog",

  data() {
    return {
      selectedVenue: "",
      selectedLine: "",
      selectedRegion: "",
      activeNames: [],
      activeNamesDetail: [],
    };
  },

  props: {
    selectedDetails: {
      required: true,
    },

    visible: {
      type: Boolean,
      required: true,
    },
  },

  methods: {
    closeDialog() {
      this.$emit("update:visible", false); // 通知父组件关闭弹窗
    },
    submitClick() {
      this.$emit("submitClickTransfer");
    },
    withdrawClick() {
      this.$emit("withdrawClickTransfer");
    },
    formatCoordinate(coord) {
      const degrees = Math.floor(coord);
      const minutes = Math.floor((coord - degrees) * 60);
      const seconds = (((coord - degrees) * 60 - minutes) * 60).toFixed(1);
      return `${degrees}°${minutes}'${seconds}"`;
    },
    scrollToTop() {
      // 获取容器与目标项的位置信息
      const scrollContainer = this.$refs.scrollContainer;
      const targetItem = this.$refs.scrollContainer.querySelector(
        ".el-collapse-item.is-active"
      );
      // console.log("targetItem: ", targetItem);
      // console.log("scrollContainer: ", scrollContainer);
      if (scrollContainer && targetItem) {
        setTimeout(() => {
          const targetPosition =
            targetItem.getBoundingClientRect().top -
            scrollContainer.getBoundingClientRect().top +
            scrollContainer.scrollTop;
          scrollContainer.scrollTo({
            top: targetPosition,
            behavior: "smooth", // 平滑滚动
          });
        }, 300);
        setTimeout(() => {
          console.log("scrollContainer.scrollTop:", scrollContainer.scrollTop);
          console.log("执行scrollToTop");
        }, 0);
      }
    },

    scrollToTopDetail() {
      // 获取容器与目标项的位置信息
      const scrollContainer = this.$refs.scrollContainer;
      let targetItem;
      if (this.activeNames.includes("main1")) {
        targetItem = scrollContainer.querySelector(
          ".collapse-content-main1-yy-pr-information .collapse-yy-inner-pr-information .el-collapse-item.is-active"
        );
      } else if (this.activeNames.includes("main2")) {
        targetItem = scrollContainer.querySelector(
          ".collapse-content-main2-yy-pr-information .collapse-yy-inner-pr-information .el-collapse-item.is-active"
        );
      } else if (this.activeNames.includes("main3")) {
        targetItem = scrollContainer.querySelector(
          ".collapse-content-main3-yy-pr-information .collapse-yy-inner-pr-information .el-collapse-item.is-active"
        );
      } else if (this.activeNames.includes("main4")) {
        targetItem = scrollContainer.querySelector(
          ".collapse-content-main4-yy-pr-information .collapse-yy-inner-pr-information .el-collapse-item.is-active"
        );
      }
      if (scrollContainer && targetItem) {
        setTimeout(() => {
          const targetPosition =
            targetItem.getBoundingClientRect().top -
            scrollContainer.getBoundingClientRect().top +
            scrollContainer.scrollTop;
          scrollContainer.scrollTo({
            top: targetPosition,
            behavior: "smooth", // 平滑滚动
          });
        }, 300);
      }
    },

    refreshChange() {
      this.activeNamesDetail = [];
      this.activeNames = [];
      this.$refs.scrollContainer.scrollTop = 0;
    },

    handleChange(val) {
      // console.log('handleChange: ', val);
      if (val.length > 0) {
        this.activeNamesDetail = [];
      } else {
        this.activeNamesDetail = [];
      }

      this.$nextTick(() => {
        this.scrollToTop();
      });
    },

    handleChangeDetail() {
      this.$nextTick(() => {
        this.scrollToTopDetail();
        this.$emit("entity-change", this.activeNames, this.activeNamesDetail);
      });
    },
    testClick() {
      this.activeNames = ["main3"];
      this.activeNamesDetail = [0];
      this.$nextTick(() => {
        this.scrollToTopDetail();
      });
    },

    clickGis(mainid, indexid) {
      this.activeNames = [];
      this.activeNamesDetail = [];
      this.activeNames.push(mainid);
      this.activeNamesDetail.push(indexid);
      this.$nextTick(() => {
        this.scrollToTopDetail();
      });
    },
    downloadAttachment() {
      if (this.selectedDetails.documentsPreview) {
        const link = document.createElement("a");
        link.href = this.selectedDetails.documentsPreview;
        link.download = "附件.pdf";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    },
  },
};
</script>
  <style scoped>
.botton-shut-icon-yy-information {
  background-image: url("@/assets/img/nav/关闭.png");
  position: absolute;
  background-size: contain;
  /* 背景图片覆盖按钮大小 */
  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 75%;
  top: 5%;
  width: 40px;
  height: 40px;
  z-index: 3;
  border: none;
  cursor: pointer;
  /* filter: brightness(0.1); */
  pointer-events:auto;
}

.dialog-title-yy-information {
  width: 62%;
  position: absolute;
  top: 5%;
  left: 5%;
  /* background-color: white; */
}

.dialog-title-text-yy-information {
  position: absolute;
  top: 5%;
  left: 17%;
  overflow-wrap: break-word;

  background-image: linear-gradient(
    180deg,
    rgba(200, 215, 228, 1) 0,
    rgba(255, 255, 255, 1) 100%
  );
  color: rgba(112, 112, 112, 1);
  font-size: 20px;
  letter-spacing: 1px;
  font-family: PangMenZhengDao-3;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 23px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dialog-container-ok-information {
  background-image: url("@/assets/img/module2/bg.png");
  background-size: 100% 100%;
  /* background-color:white; */
  padding: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 80%;
  height: 91%;
  position: absolute;
  top: 8%;
  left: 5%;
  padding: 0px;
  flex-grow: 1;
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  pointer-events:auto;
}

.top-section-yy-information {
  /* z-index: 10; */
  /* position:absolute; */

  margin-bottom: 5%;
  margin-top: 5%;
  left: 0%;
  height: 8%;
  top: 5%;
  /* display: block; */
  /* background-color: blue; */
}

.jindudian-green-yy-information {
  background-color: rgba(151, 223, 117, 1);
  border-radius: 50%;
  position: absolute;
  left: 108px;
  top: 16px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(246, 246, 246, 1);
  top: 5%;
  z-index: 400;
}

.jindudian-white-yy-information {
  background-color: rgba(216, 216, 216, 1);
  border-radius: 50%;
  position: absolute;
  left: 108px;
  top: 16px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(246, 246, 246, 1);
  top: 5%;
  z-index: 400;
}

.jindutiao-white-yy-information {
  position: absolute;
  left: 8%;
  top: 5.3%;
  width: 86%;
  height: 10px;
  background-image: url("@/assets/img/module2/whiteline.png");
  background-size: 100% 100%;
  background-color: transparent;
}

.jindutiao-green-yy-information {
  position: absolute;
  top: 5.3%;
  width: 30%;
  height: 10px;
  background-image: url("@/assets/img/module2/greenline.png");
  background-size: 100% 100%;
  background-color: transparent;
  z-index: 200;
}

.jindutiao-text-green-yy-information {
  overflow-wrap: break-word;
  color: rgba(151, 223, 117, 1);
  font-size: 12px;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 17px;
  position: absolute;
  top: 7.5%;
}

.jindutiao-text-white-yy-information {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 17px;
  position: absolute;
  top: 7.5%;
}

.progress-labels-yy-information {
  position: absolute;
  color: white;
  top: 7%;
  left: 50%;
  transform: translate(-50%);
  font-size: 20px;
}

.bottom-section-yy-information {
  position: absolute;
  /* background-color: white; */
  left: 0%;
  top: 11%;
  width: 100%;
  height: 85%;
  /* margin-left: 15px;
    flex-grow: 1; */
}

.select-section-yy-information {
  background-image: url("@/assets/img/module2/bg.png");
  background-size: 100% 100%;
  position: absolute;
  /* background-color:transparent; */
  left: 6%;
  top: 215px;
  width: 88%;
  height: 190px;
}

.select-section-title-ok-information {
  /* background-image: url("@/assets/img/module2/selecttitle.png"); */
  /* background-color: #fff; */

  position: absolute;
  margin-top: -60px;
  display: flex;
  align-items: center;
  /* background-color: white; */
  width: 100%;
  height: 50px;
}

.select-section-titleimg-yy-information {
  position: absolute;
  left: 6%;
  top: 22%;
  width: 7%;
  height: 44%;
  background-image: url("@/assets/img/module2/titlelist.png");
  background-size: 100% 100%;
  background-color: transparent;
}

.select-section-titletext-yy-information {
  position: absolute;
  top: 23%;
  left: 15%;
  /* transform: translate(0%, -50%); */
  font-size: 18px;
  font-weight: 300;
}

.jindudian-green-yy-pr-information {
  background-color: rgba(151, 223, 117, 1);
  border-radius: 50%;
  position: absolute;
  left: 108px;
  top: 16px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(246, 246, 246, 1);
  top: 5%;
  z-index: 400;
}

.jindudian-white-yy-pr-information {
  background-color: rgba(216, 216, 216, 1);
  border-radius: 50%;
  position: absolute;
  left: 108px;
  top: 16px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(246, 246, 246, 1);
  top: 5%;
  z-index: 400;
}

.dropdown-container-yy-information {
  /* background-color: white; */
  position: absolute;
  top: 25%;
  left: 0%;
  height: 75%;
  width: 100%;
}

.dropdown-yy-information {
  position: relative;
  left: 15%;
  width: 70%;
  height: 20%;
  margin-top: 5%;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  color: white;
  font-weight: 600;
  background-color: black;
  font-size: 20px;
}

.dropdown-yy-information option {
  background-color: #2b2b2b;
  /* 设置下拉选项的背景颜色 */
  color: #fff;
  /* 设置下拉选项的文字颜色 */
}

.submit-button-yy-information {
  background-image: url("@/assets/img/module2/button-tijiao.png");
  position: absolute;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */

  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 50%;
  bottom: 8%;
  height: 40px;
  width: 120px;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 18px;
  text-align: center;
  transform: translate(-50%);
}

.ban-submit-button-yy-information {
  background-image: url("@/assets/img/module2/button-tijiao.png");
  position: absolute;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */

  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 50%;
  bottom: 8%;
  height: 40px;
  width: 120px;
  border: none;
  cursor: not-allowed;
  filter: grayscale(100%);
  color: white;
  font-size: 18px;
  text-align: center;
  transform: translate(-50%);
}

.withdraw-button-yy-information {
  background-image: url("@/assets/img/module2/button-bohui.png");
  position: absolute;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */

  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 50%;
  bottom: 8%;
  height: 40px;
  width: 120px;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 18px;
  text-align: center;
  transform: translate(-50%);
}

.up-content-text-yy-information {
  margin-right: 3%;
  text-align: right;
  width: 27%;
  z-index: 2000;
}

.info-box-yy-information {
  position: relative;
  background-image: url("@/assets/img/module2/text.png");
  background-size: cover;
  padding: 0px;
  width: 60%;
  height: 40px;
}

.info-box-text-yy-information {
  font-size: 14px;
  color: rgba(208, 219, 227, 1);
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.info-box-yy-ps-information {
  position: relative;
  background-image: url("@/assets/img/module2/text.png");
  background-size: cover;
  padding: 0px;
  width: 60%;
  height: 40px;
}

.select-yy-information {
  background-color: transparent;
  border: none;
  color: rgba(208, 219, 227, 1);
  width: 100%;
  height: 100%;
  font-size: 14px;
  padding-left: 10%;
  z-index: 3000;
}

.select-yy-information option {
  background-color: #2b2b2b;
  /* 设置下拉选项的背景颜色 */
  color: #fff;
  /* 设置下拉选项的文字颜色 */
  border: none;
}
.el-query-button {
  background-image: url("@/assets/img/module2/button-tijiao.png");
  background-size: 100% 100%;
  border: none;
  background-color: transparent;
  height: 40px;
  width: 120px;
  color: white;
  font-size: 18px;
  text-align: center;
  position: relative;
  top: 32vh;
  margin-left: 120px;
  margin-bottom: 5px;
}
</style>